{% extends 'user.html' %}

{% block left %}
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed layui-this">
            <a href="{% url 'user_home' %}">书架</a>

        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">借阅详情</a>
            <dl class="layui-nav-child">
                <dd><a href="{% url 'my_borrow_book' %}">我的借书</a></dd>
                <dd><a href="{% url 'show_return_book' %}">我的还书</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">个人中心</a>
            <dl class="layui-nav-child">
                <dd><a href="{% url 'user_detail' %}">账号详情</a></dd>
            </dl>
        </li>
    </ul>
{% endblock %}

{% block body %}
    <span class="layui-breadcrumb">
                <a href="{% url 'user_home' %}">首页</a>
                <a><cite>书架</cite></a>
            </span>
    <hr/>
    <form class="layui-form" action="{% url 'user_search_book' %}">

        <div class="layui-inline">
            <label class="layui-form-label">筛选条件</label>
            <div class="layui-input-inline">
                <select name="userType" lay-verify="required" required>
                    <option value=""></option>
                    <option value="0">ISBN</option>
                    <option value="1">书名</option>
                    <option value="2">作者</option>
                    <option value="3">出版社</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <input type="text" name="userTitle" required lay-verify="required" placeholder="ISBN，书名，作者，出版社"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <button type="submit" class="layui-btn layui-btn-primary">查询</button>

    </form>
    <hr/>
    {% if flag == 1 %}
        <a href="{% url 'user_home' %}">返回首页</a>
    {% endif %}

    <table class="layui-table">
        <tr>
            <th>ISBN</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>价格</th>
            <th>可借阅数量</th>
            <th>操作</th>
        </tr>
        {% for i in book_lists %}
            <tr>
                <th>{{ i.ISBN }}</th>
                <th>{{ i.book_name }}</th>
                <th>{{ i.author }}</th>
                <th>{{ i.press }}</th>
                <th>{{ i.price }}</th>
                <th id="{{ i.id }}">{{ i.num }}</th>
                <th>
                    <button id="btn1--{{ i.id }}" onclick="borrow({{ i.id }})" class="layui-btn layui-btn-normal">
                        借阅
                    </button>
                </th>
            </tr>
        {% endfor %}
    </table>
{% endblock %}

{% block js %}
    <script>
        function borrow(bookId) {
            if (parseInt($('#' + bookId).html()) == 0)
                layer.open({
                    content: '此书已全部借出！'
                    , btn: ['确认']
                    , yes: function (index, layero) {
                        location.href = '{% url 'user_home' %}'
                    }
                })
            else {
                layer.open({
                    title: '借阅信息'
                    , content: '是否确认借阅此书？'
                    , btn: ['确认', '取消']
                    , yes: function (index, layero) {
                        $.ajax({
                            url: '{% url 'borrow_book' %}',
                            type: 'POST',
                            data: {'bookId': bookId},
                            dataType: 'JSON',
                            success: function (res) {
                                layer.open({
                                    content: '成功借阅！',
                                    btn: ['确定'],
                                    yes: function (index, layero) {
                                        location.href = '{% url 'user_home' %}'
                                    }
                                })
                            }
                        })
                    }
                })
            }
        }
    </script>
{% endblock %}